<template>
	<view class="content">
		<view class="item">
			<fast-select :data="radioList" @change="changeRadio">
				<view v-if="radioValue" class="text">{{ radioValue }}</view>
				<view v-else class="text">单项选择</view>
			</fast-select>
		</view>
		<view class="item">
			<fast-select :data="keyList" label="value" mode="key" @change="changeKey">
				<view v-if="keyValue" class="text">{{ keyValue }}</view>
				<view v-else class="text">索引选择</view>
			</fast-select>
		</view>
		<view class="item">
			<fast-select :data="bothList" interval="." mode="both" @change="changeBoth">
				<view v-if="bothValue" class="text">{{ bothValue }}</view>
				<view v-else class="text">双项选择</view>
			</fast-select>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radioValue: '',
				keyValue: '',
				bothValue: '',
				radioList: [
					'测试选项1',
					'测试选项2',
					'测试选项3',
					'测试选项4',
					'测试选项5',
					'测试选项6',
					'测试选项7',
					'测试选项8',
					'测试选项9',
				],
				keyList: [{ key: 'a', value: 'aaaaaa' },
					{ key: 'b', value: 'bbbbbb' },
					{ key: 'c', value: 'cccccc' },
					{ key: 'd', value: 'dddddd' },
					{ key: 'd', value: 'dddddd1' },
					{ key: 'd', value: 'dddddd2' },
					{ key: 'd', value: 'dddddd3' },
					{ key: 'd', value: 'dddddd4' },
					{ key: 'e', value: 'eeeeee' }, 
					{ key: 'f', value: 'ffffff' }, 
					{ key: 'g', value: 'gggggg' }, 
					{ key: 'h', value: 'hhhhhh' }, 
					{ key: 'i', value: 'iiiiii' }, 
					{ key: 'j', value: 'jjjjjj' }, 
					{ key: 'k', value: 'kkkkkk' }, 
					{ key: 'l', value: 'llllll' }, 
					{ key: 'm', value: 'mmmmmm' }, 
					{ key: 'm', value: 'mmmmmm1' }, 
					{ key: 'm', value: 'mmmmmm2' }, 
					{ key: 'm', value: 'mmmmmm3' }, 
					{ key: 'm', value: 'mmmmmm4' }, 
					{ key: 'm', value: 'mmmmmm5' }, 
					{ key: 'n', value: 'nnnnnn' }, 
					{ key: 'o', value: 'oooooo' }, 
					{ key: 'p', value: 'pppppp' }, 
					{ key: 'q', value: 'qqqqqq' }, 
					{ key: 'r', value: 'rrrrrr' }, 
					{ key: 's', value: 'ssssss' }, 
					{ key: 't', value: 'tttttt' }, 
					{ key: 'u', value: 'uuuuuu' }, 
					{ key: 'v', value: 'vvvvvv' }
				],
				bothList: [
					[],
					[]
				]
			}
		},
		onLoad() {

			for (let k = 0; k <= 100; k++) {
				this.bothList[0].push(k);
			}
			for (let k = 0; k <= 9; k++) {
				this.bothList[1].push(k);
			}
		},
		methods: {
			changeRadio(item, index){
				this.radioValue = item
			},
			changeKey(item, index){
				this.keyValue = item.value
			},
			changeBoth(item){
				this.bothValue = item[0] + '.' + item[1]
			},
		}
	}
</script>

<style lang="less" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		.item{
			width: 80%;
			padding: 3vw 5vw;
			border-radius: 2vw;
			margin: 3vw;
			border: 3px solid #888;
			background-color: white;
			box-shadow: 5px 5px 2px 0px rgba(0, 0, 0, 0.2);
			
			.text{
				text-align: center;
				
			}
		}
		
	}
</style>